<template>
  <Wrapper>
    <card-form ref="formRef" v-model="formData">
      <template #header>
        <el-space>
          <h3>一行三个, label-width为90px</h3>
          <el-button
            type="primary"
            @click="ElMessage.success(JSON.stringify(formData))"
            >获取值</el-button
          >
          <el-button @click="reset">重置</el-button>
        </el-space>
      </template>
      <el-row :gutter="30">
        <col-wrapper label="姓名" prop="name">
          <el-input v-model="formData.name" placeholder="请输入姓名" />
        </col-wrapper>
        <col-wrapper label="年龄" prop="age">
          <el-input v-model="formData.age" placeholder="请输入年龄" />
        </col-wrapper>
        <col-wrapper label="性别" prop="sex">
          <el-select v-model="formData.sex" placeholder="请选择">
            <el-option label="男" value="man" />
            <el-option label="女" value="woman" />
          </el-select>
        </col-wrapper>
      </el-row>
    </card-form>

    <card-form header="一行四个, label-width为60px" label-width="60px">
      <el-row :gutter="30">
        <col-wrapper label="姓名" :lg="6">
          <el-input placeholder="请输入姓名" />
        </col-wrapper>
        <col-wrapper label="年龄" :lg="6">
          <el-input placeholder="请输入年龄" />
        </col-wrapper>
        <col-wrapper label="性别" :lg="6">
          <el-select placeholder="请选择">
            <el-option label="男" value="man" />
            <el-option label="女" value="woman" />
          </el-select>
        </col-wrapper>
        <col-wrapper label="其他" :lg="6">
          <el-input placeholder="其他。。。。。。。" />
        </col-wrapper>
      </el-row>
    </card-form>
  </Wrapper>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import CardForm from '@/components/wrapper/card-form'
import ColWrapper from '@/components/wrapper/col'

const formRef = ref(null)
const formData = ref({
  name: '',
  age: '',
  sex: '',
})

function reset() {
  formRef.value.resetFields()
}
</script>
